import { useEffect,useState } from "react"

import type { MenuProps } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown,message } from 'antd';

import { post } from "@/api/index"
import router from "@/router"
import "./index.less"
const App = () => {
  const [userInfo,setUserInfo] = useState({} as any)
  const items: MenuProps['items'] = [
    {
      label: '登出',
      key: '1',
    },
  ]
  const onClick: MenuProps['onClick'] = async () => {
    try{
      const res = await post("/users/logout",{name:userInfo.name})
      if(res.code === 200){
        sessionStorage.removeItem("token")
        router.navigate("/login",{
          replace:true
        })
        message.success(res.message)
      }
    }catch(e){
      console.log(e)
    }
  }
  useEffect(()=>{
    const res = JSON.parse(sessionStorage.getItem("userDetail") as string)
    setUserInfo({
      ...userInfo,
      ...res
    })
  },[])
  return (
    <div className="haeder">
      <div className="title">Zhou-Blog管理端</div>
      <div className="userInfo">
        <Dropdown menu={{ items, onClick }}>
          <div onClick={(e) => e.preventDefault()}>
            {userInfo.name}
            <DownOutlined />
          </div>
        </Dropdown>
      </div>
    </div>
  )
};

export default App;